<template>
  <div class="q-pa-sm tab-container">
    <div class="q-gutter-y-md">
      <ScrollArea :bot-margin="botMargin">
        <slot></slot>
      </ScrollArea>
        <q-card-actions class="justify-evenly " style="padding: 0;">
          <q-btn v-if="props.btn2Callback" label="Cancel" class="q-ml-sm grey-btn" @click="clickBtn2"/>
          <q-btn v-if="props.btn1Callback" label="Save" class="grey-btn" type="submit" @click="clickBtn1"/>
        </q-card-actions>

    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollArea from 'src/components/ScrollArea.vue';


const props = withDefaults(defineProps<{
    btn1Callback?:()=>void
    btn2Callback?:()=>void
    botMargin: number
}>(),{
  botMargin:150
})


async function clickBtn1() {
  if (props.btn1Callback)
    props?.btn1Callback()
}


function clickBtn2() {
  if (props.btn2Callback)
    props?.btn2Callback()
}





</script>
<style>
.footer {
  position:fixed;
  left: 0;
  bottom: 100;
  width: 100%;
  text-align: center;
}
</style>
